<!--
 * @Author: Karl Liris
 * @Date: 2021-02-23 15:09:05
 * @LastEditTime: 2021-03-17 05:01:07
-->
<template>
  <el-dialog
    title="代理小工具"
    :visible="true"
    :fullscreen="true"
    @close="onClose"
  >
    <el-form v-model="config" label-width="82px">
      <el-form-item label="服务端口：">
        <el-input v-model="config.serverPort" style="width: 80px;"></el-input>
      </el-form-item>
      <el-form-item label="目录：">
        <el-input v-model="config.path" style="width: 80px;"></el-input>
      </el-form-item>
      <el-form-item label="协议：">
        <el-select v-model="config.protocol" style="width: 80px;">
          <el-option label="http:" value="http:"></el-option>
          <el-option label="https:" value="https:"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主机：">
        <el-input v-model="config.host" style="width: 160px;"></el-input>
      </el-form-item>
      <el-form-item label="目标端口：">
        <el-input v-model="config.port" style="width: 80px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          :type="isStart ? 'danger' : 'primary'"
          @click="toggleServer"
        >{{ isStart ? '停止' : '启动' }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ipcRenderer } from 'electron';

export default {
  data() {
    return {
      isStart: false,
      config: {
        serverPort: '7001',
        path: '/cy7',
        protocol: 'http:',
        host: '192.168.8.134',
        port: '7001',
      },
    };
  },
  mounted() {
    ipcRenderer.on('toggleServer', (event, state) => {
      this.isStart = state;
    });
  },
  methods: {
    onClose() {
      ipcRenderer.send('closeWindow');
    },
    toggleServer() {
      ipcRenderer.send('toggleServer', this.config);
    },
  },
}
</script>
